<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input
        type="text"
        placeholder="enter the name you search"
        v-model="keyword"
      />&nbsp;
      <button @click="clickHandler">Search</button>
    </div>
  </section>
</template>

<script>
export default {
  name: "",
  data() {
    return {
       //输入框的关键字的收集
       keyword:''

    }
  },
  methods: {
    //Search搜索按钮的回调函数
    clickHandler(){
        //输入的用户名字不能为空的
        if(this.keyword.trim()==''){
            alert('用户名字不能为空');
            return;
        }
        //通过全局事件总线:将当前组件关键字传递给兄弟组件！！！
        this.$bus.$emit('sendKeyword',this.keyword);
        //给兄弟组件传递完数据，把关键字置空！！！
        this.keyword = '';
    }
  }
};
</script>

<style scoped>
</style>
